<template>
    <div style="text-align: left; margin-bottom: 10px;">
        <div class="dot"></div>
        <div style="display: inline-block; margin: 0 20px 0 10px;">Capturetv mode .setup view </div>
        <el-link type="success"> [Top] Path: /project/path/to/filepath_resultB</el-link>
    </div>
    <el-table :data="tableData" style="width: 100%;" :header-cell-style="tableHeaderColor">
        <el-table-column type="index" width="50" align="center" :index="indexMethod" />
        <el-table-column prop="date" label="Scenario" width="150" header-align="center" />
        <el-table-column label="reg-reg" align="center">
            <el-table-column prop="name" label="Name" width="80" />
            <el-table-column prop="name" label="Name" width="80" />
            <el-table-column prop="name" label="Name" width="80" />
        </el-table-column>
        <el-table-column label="reg-out" align="center">
            <el-table-column prop="state" label="State" width="80" />
            <el-table-column prop="city" label="City" width="80" />
            <el-table-column prop="city" label="City" width="80" />
        </el-table-column>
        <el-table-column label="reg-out" align="center">
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="zip" label="Zip" width="80" />
            <el-table-column prop="zip" label="Zip" width="80" />
        </el-table-column>
        <el-table-column label="Total" align="center">
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="zip" label="Zip" width="80" />
            <el-table-column prop="zip" label="Zip" width="80" />
        </el-table-column>
    </el-table>
    <br>
    <div style="text-align: left; margin-bottom: 10px;">
        <div class="dot"></div>
        <div style="display: inline-block; margin: 0 20px 0 10px;">Capturetv mode .hold view </div>
        <el-link type="success"> [Top] Path: /project/path/to/filepath_resultB</el-link>
    </div>
    <el-table :data="tableData" style="width: 100%;" :header-cell-style="tableHeaderColor">
        <el-table-column type="index" width="50" align="center" :index="indexMethod" />
        <el-table-column prop="date" label="Scenario" width="150" header-align="center" />
        <el-table-column label="reg-reg" align="center">
            <el-table-column prop="name" label="Name" width="80" />
            <el-table-column prop="name" label="Name" width="80" />
            <el-table-column prop="name" label="Name" width="80" />
        </el-table-column>
        <el-table-column label="reg-out" align="center">
            <el-table-column prop="state" label="State" width="80" />
            <el-table-column prop="city" label="City" width="80" />
            <el-table-column prop="city" label="City" width="80" />
        </el-table-column>
        <el-table-column label="reg-out" align="center">
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="zip" label="Zip" width="80" />
            <el-table-column prop="zip" label="Zip" width="80" />
        </el-table-column>
        <el-table-column label="Total" align="center">
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="zip" label="Zip" width="80" />
            <el-table-column prop="zip" label="Zip" width="80" />
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
const indexMethod = (index) => {
    return index * 1
}
const tableHeaderColor = {
    background: '#1F4A00 !important',
    color: '#ffffff',
    fontSize: '14px',
    textAlign: 'center',
}
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },
]
</script>

<style scoped>
.dot {
    width: 6px;
    /* 宽度 */
    height: 6px;
    /* 高度 */
    background-color: black;
    /* 背景颜色 */
    border-radius: 50%;
    /* 边框半径，设置为50%将其变为圆形 */
    display: inline-block;
    /* 行内块元素，使得元素垂直居中 */
}

</style>